<!doctype html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
		<style type="text/css">
			.section1{
				background: url("images/yanjiuxiangmu.jpg")center center no-repeat;
				height: 100%;
				overflow: hidden;
				padding:40px 0px;
			}
			.section1 .container .row>div{
				position:relative;
			    padding: 34px 0 80px 0;
			}
			.section1 .container .row>div+div{
				border-left: 1px solid #9cc3c9;
			}
			.fetrue_icon{
				text-align: center;
				margin-bottom: 40px;
			}
			.fetrue_name{
				margin-bottom: 28px;
				position: relative;
				z-index: 2;
				top: 0px;
				left:0px;
			}
			.fetrue_name p{
				text-align: center;
				color:#3194a4;
				margin:0px 0px 6px;
			}
			.fetrue_view{
				color:#fff;
				line-height:26px;
				height: 86px;
				opacity: 0;
				position: relative;
				z-index: 2;
				top: 0px;
				left:0px;
				padding:10px 15px;
			 	-webkit-transition: all 0.5s;
			    -moz-transition: all 0.5s;
			    -o-transition: all 0.5s;
			    transition: all 0.5s;
			}
			.section1 .asbg{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.section1 .asbg span{
				display: block;
				animation-delay: 5s;
				-webkit-animation-delay: 5s;
				-moz-animation-delay: 5s;
			    -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			    -moz-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			    -o-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			.section1 .asbg .all{
				display: block;
				position: relative;
				width: 100%;
				height:100%;
			}
			.section1 .asbg .all .a1{
				position: absolute;
				width: 100%;
				height: 175px;
				bottom: 3px;
				opacity: 0;
				background: #3194a4;
			}
			.section1 .asbg .all .a2{
				position: absolute;
				width: 3px;
				height: 0%;
				left:0px;
				top:0px;
				opacity: 0;
				background: #3194a4;
				z-index: 10;
			}
			.section1 .asbg .all .a3{
				position: absolute;
				width: 0px;
				height: 3px;
				right:0px;
				top:0px;
				opacity: 0;
				background: #3194a4;
				z-index: 10;
			}
			.section1 .asbg .all .a4{
				position: absolute;
				width: 3px;
				height: 0%;
				right:0px;
				bottom:0px;
				opacity: 0;
				background: #3194a4;
				z-index: 10;
			}
			.section1 .asbg .all .a5{
				position: absolute;
				width: 0%;
				height: 3px;
				left:0px;
				bottom:0px;
				opacity: 0;
				background: #3194a4;
				z-index: 10;
			}
			.section1 .container .row>div:hover .asbg .all .a1{
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.section1 .container .row>div:hover .asbg .all .a2{
				height:100%;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.section1 .container .row>div:hover .asbg .all .a3{
				width:100%;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.section1 .container .row>div:hover .asbg .all .a4{
				height:100%;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.section1 .container .row>div:hover .asbg .all .a5{
				width: 100%;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.section1 .container .row>div:hover .fetrue_view{
				opacity: 1;
				filter: alpha(opacity=100);
			}
		</style>
	</head>
	<body>
		<section class="section1">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="fetrue_icon">
							<img src="images/news.png" />							
						</div>
						<div class="fetrue_name">
							<p>信息安全集成平台</p>
							<p><i>ISAP</i></p>
						</div>
						<div class="fetrue_view">
						1、摆脱国外中高端产品垄断。<br>2、降低企业信息化投入成本。<br>3、保障政府和企业信息安全。<br>4、助力国家产业升级转型。
						</div>
						<div class="asbg">
							<span class="all">
								<span class="a1"></span>
								<span class="a2"></span>
								<span class="a3"></span>
								<span class="a4"></span>
								<span class="a5"></span>
							</span>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="fetrue_icon">
							<img src="images/yanglao.png"/>
						</div>
						<div class="fetrue_name">
							<p>养老健康服务平台</p>
							<p><i>ECHS</i></p>
						</div>
						<div class="fetrue_view">老年人健康服务平台实现居家养老相关的健康、医疗、生活、休闲、娱乐、 家政等一系列服务解决方案，采用服务定制的方式，满足老年人不同需要。
						</div>
						<div class="asbg">
							<span class="all">
								<span class="a1"></span>
								<span class="a2"></span>
								<span class="a3"></span>
								<span class="a4"></span>
								<span class="a5"></span>
							</span>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="fetrue_icon">
							<img src="images/jiankong.png"/>							
						</div>
						<div class="fetrue_name">
							<p>医院服务实施监测系统</p>
							<p><i>MOMITOR</i></p>
						</div>
						<div class="fetrue_view">
						1、全面监控服务器资源的运行状态。<br>2、全面监测每个接口的调用情况。<br>3、每周、每月自动生成报告趋势分析。<br>4、提供灵活的通知、预警机制。
						</div>
						<div class="asbg">
							<span class="all">
								<span class="a1"></span>
								<span class="a2"></span>
								<span class="a3"></span>
								<span class="a4"></span>
								<span class="a5"></span>
							</span>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="fetrue_icon">
							<img src="images/bigdata.png"/>
						</div>
						<div class="fetrue_name">
							<p>健康大数据</p>
							<p><i>BIG DATA</i></p>
						</div>
						<div class="fetrue_view">
						围绕健康大数据的采集、处理、存储、分析、呈现及应用服务全过程，着力开展医疗数据分析与监测、移动健康管理与智能服务等健康大数据相关基础理论研究、关键技术攻关及应用推广工作。
						</div>
						<div class="asbg">
							<span class="all">
								<span class="a1"></span>
								<span class="a2"></span>
								<span class="a3"></span>
								<span class="a4"></span>
								<span class="a5"></span>
							</span>
						</div>
					</div>
				</div>	
			</div>		
		</section>
	</body>
</html>	